import { createPageTemplateConfig, PageTemplate, type ActionButtonConfig } from '@/components';
import useIntlCustom from '@/hooks/useIntlCustom';
import { CopyOutlined, DeleteOutlined, EditOutlined, SafetyCertificateOutlined, TeamOutlined } from '@ant-design/icons';
import { message } from 'antd';
import { useState } from 'react';
import MenuAuthCom from './components/MenuAuthCom';
import UserDetailDrawer from './components/UserDetailDrawer';
import { getPageConfig, type RoleRecord } from './pageConfig';

const RoleManagePage = () => {
  const { translate } = useIntlCustom();
  const t = (key: string) => translate('systemManage', key);
  const pageConfig = getPageConfig(translate);
  const [detailData, setDetailData] = useState<RoleRecord | null>(null);
  const [showUserDetail, setShowUserDetail] = useState(false);
  const [showMenuAuth, setShowMenuAuth] = useState(false);

  // 统一的操作处理函数
  const handleAction = (actionType: string, record: RoleRecord) => {
    console.log('Action triggered:', actionType, record);

    switch (actionType) {
      case 'userDetail':
        setDetailData(record);
        setShowUserDetail(true);
        break;
      case 'menuAuth':
        setDetailData(record);
        setShowMenuAuth(true);
        break;
      default:
        return record;
    }
  };

  // 自定义操作按钮配置
  const customActions: ActionButtonConfig[] = [
    {
      key: 'copy',
      label: t('copy'),
      icon: <CopyOutlined />,
      type: 'link',
      className: 'page-template-action-copy-btn',
      permission: 'create',
    },
    {
      key: 'edit',
      label: t('edit'),
      icon: <EditOutlined />,
      type: 'link',
      className: 'page-template-action-edit-btn',
      permission: 'update',
    },
    {
      key: 'menuAuth',
      label: t('menuPermissions'),
      icon: <SafetyCertificateOutlined />,
      type: 'link',
      className: 'page-template-action-menu-auth-btn',
      permission: 'update',
    },
    {
      key: 'userDetail',
      label: t('viewUser'),
      icon: <TeamOutlined />,
      type: 'link',
      className: 'page-template-action-user-detail-btn',
      permission: 'view',
    },
    {
      key: 'delete',
      label: t('delete'),
      icon: <DeleteOutlined />,
      type: 'link',
      danger: true,
      className: 'page-template-action-delete-btn',
      permission: 'delete',
    },
  ];

  // 使用配置构建器创建页面配置
  const templateConfig = createPageTemplateConfig<RoleRecord>()
    .setSearchConfig({
      fields: pageConfig.searchFields,
    })
    .setTableConfig({
      columns: pageConfig.columns,
      rowKey: 'roleId',
      props: {
        scroll: { x: 800 },
        size: 'middle',
      },
    })
    .setFormConfig({
      fields: pageConfig.formFields,
    })
    .setActionConfig({
      permissions: {
        create: true,
        update: true,
        delete: true,
        view: true,
      },
      customActions,
      onAction: handleAction,
    })
    .setCrudConfig(pageConfig.crudConfig)
    .build();

  return (
    <>
      <PageTemplate<RoleRecord> {...templateConfig} />

      {/* 用户详情抽屉 */}
      <UserDetailDrawer open={showUserDetail} onClose={() => setShowUserDetail(false)} roleData={detailData} />

      {/* 菜单授权抽屉 */}
      {showMenuAuth && detailData && (
        <MenuAuthCom
          open={showMenuAuth}
          onCancel={() => setShowMenuAuth(false)}
          onSubmit={(selectedPermissions) => {
            console.log('选中的权限:', selectedPermissions);
            console.log('角色:', detailData);
            message.success(t('menuAuthSaveSuccess'));
            setShowMenuAuth(false);
            // TODO: 这里可以调用API保存权限
          }}
          initialSelected={[]}
        />
      )}
    </>
  );
};

export default RoleManagePage;
